<template>
  <div>
    <a-page-header :ghost="false" title="微信配置">
      <div class="ele-text-secondary"> 用于绑定微信appid和app_secret </div>
    </a-page-header>
    <div class="ele-body">
      <a-card :bordered="false">
        <a-form
          ref="formRef"
          :model="form"
          :rules="rules"
          :label-col="styleResponsive ? { sm: 4, xs: 24 } : { flex: '100px' }"
          :wrapper-col="styleResponsive ? { sm: 20, xs: 24 } : { flex: '1' }"
          style="max-width: 800px; margin: 0 auto"
        >
          <a-form-item label="appid" name="appid">
            <a-input
              allow-clear
              placeholder="请输入appid"
              v-model:value="form.appid"
            />
          </a-form-item>
          <a-form-item label="appsecret" name="appsecret">
            <a-input
              allow-clear
              placeholder="请输入appsecret"
              v-model:value="form.appsecret"
            />
          </a-form-item>
          <a-form-item
            :wrapper-col="
              styleResponsive ? { sm: { offset: 4 } } : { offset: 3 }
            "
          >
            <a-space size="middle">
              <a-button @click="finishPageTab()">关闭</a-button>
              <a-button type="primary" :loading="loading" @click="submit">
                提交
              </a-button>
            </a-space>
          </a-form-item>
        </a-form>
      </a-card>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref, reactive } from 'vue';
  import { message } from 'ant-design-vue/es';
  import type { FormInstance, Rule } from 'ant-design-vue/es/form';
  import { storeToRefs } from 'pinia';
  import { useThemeStore } from '@/store/modules/theme';
  import useFormData from '@/utils/use-form-data';
  import { finishPageTab } from '@/utils/page-tab-util';
  import { WeChatForm } from '@/api/setting/model';
  import { submitForm, getConfig } from '@/api/setting';
  import { assignObject } from 'ele-admin-pro';

  // 表单验证规则
  const rules = reactive<Record<string, Rule[]>>({
    appid: [
      {
        required: true,
        message: '请输入appid',
        type: 'string',
        trigger: 'blur'
      }
    ],
    appsecret: [
      {
        required: true,
        type: 'string',
        message: '请输入appsecret',
        trigger: 'blur'
      }
    ]
  });
  // 是否开启响应式布局
  const themeStore = useThemeStore();
  const { styleResponsive } = storeToRefs(themeStore);

  //
  const formRef = ref<FormInstance | null>(null);

  // 加载状态
  const loading = ref(false);
  // 表单数据
  const { form, resetFields } = useFormData<WeChatForm>({
    appid: undefined,
    appsecret: undefined
  });
  const query = () => {
    const params = {
      field: 'wechat'
    };
    getConfig(params).then((res) => {
      let data = JSON.parse(res.data);
      assignObject(form, data);
    });
  };
  /* 提交 */
  const submit = () => {
    if (!formRef.value) {
      return;
    }
    const newForm = {
      ...form,
      field: 'wechat'
    };
    formRef.value
      .validate()
      .then(() => {
        loading.value = true;
        submitForm(newForm).then((res: any) => {
          if (res.code === 0) {
            loading.value = false;
            resetFields();
            query();
            return message.success(res.message);
          } else {
            loading.value = false;
            return message.error(res.message);
          }
        });
      })
      .catch(() => {});
  };
  query();
</script>

<script lang="ts">
  export default {
    name: 'WeixinSetting'
  };
</script>
